移动端开发的兼容问题
文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~,加star后人生更加美好……
1、ios下input为type=button属性disabled设置true,会出现样式文字和背景异常问题。
解决方案:使用opacity=1来解决
2、对非可点击元素如(label,span)监听click事件,部分ios版本下不会触发。
解决方案:css增加cursor:pointer就搞定了
3、移动端1px边框
解决方案:比如按钮的box的class为btn
.btn:before{
content:'';
position: absolute;
top: 0;
left: 0;
border: 1px solid #ccc;
width: 200%;
height: 200%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
4、input为fixed定位,在ios下input固定定位在顶部或者底部,在页面滚动一些距离后,点击input(弹出键盘),input位置会出现在中间位置。
解决方案:内容列表框也是fixed定位,这样不会出现fixed错位的问题
5、移动端字体小于12px使用四周边框或者背景色块,部分安卓文字偏上bug问题。
解决方案:可以使用整体放大屏幕的dpr倍(width、height、font-size等等)再使用transform缩放,使用canvas在移动端会模糊也需要这样的解决方案
6、在移动端图片上传图片兼容低端机的问题。
解决方案:input 加入属性 accept="image/*" multiple
7、在h5嵌入app中,ios如果出现垂直滚动条时,手指滑动页面滚动之后,滚动很快停下来,好像踩着刹车在开车,有“滚动很吃力”的感觉。
解决方案:
self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;对webview设置了更低的“减速率”
8、移动端click 300ms 延时响应
解决方案:使用 Fastclick
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
9、在安卓机上placeholder文字设置行高会偏上
解决方案:input有placeholder情况下不要设置行高
10、overflow:scroll,或者auto在iOS上滑动卡顿的问题
解决方案:加入-webkit-overflow-scrolling:touch;
11、移动端图片压缩预览上传的问题,可以参考我的一篇文章https://segmentfault.com/a/1190000006101416
12、移动端适配可以使用lib-flexible https://github.com/amfe/lib-flexible,使用rem来布局移动端有一个问题就是px的小数点的问题,不同的手机对于小数点处理方式不一样,有些是四舍五入,有些直接舍去掉,因此在自动生成雪碧图时候图标四周适当留2px的空间,防止图标被裁剪掉
13、iphoneX的适配的解决方案
<meta name="viewport" content="...,viewport-fit=cover" />
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
14、new Date(2020-05-05)兼容问题
ios结果为NaN
将-全部替换成/
解决方案:.replace(/-/g,"/")
15、ios的input无法使用代码自动获取焦点
解决方案:可以在上个页面点击的时候隐藏一个input进行自动聚焦,到目标页面就可以正常自动获取焦点
结束……撒花~~
文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~,加star后人生更加美好……
之后有问题会陆续更新上去,大家有更多的兼容问题或者以上有问题可以在评论中留言。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。